﻿@model LetLord.ViewModels.GenericSearchResultsViewModel<LetLord.Models.Tenant>
<div class="row-fluid">
    @if (Model.SearchResults.Count == 0)
    {
        <h3 class="text-error">No tenants matched your search!</h3>
    }
    else
    {
        <ul class="thumbnails">
            @foreach (var result in Model.SearchResults)
            {
                <li class="span4">
                    <div class="thumbnail">
                        <img src="http://placehold.it/150x150/e36b23/fff/&text=Profile&image" class="img-polaroid">
                        <div class="caption">
                            <h4>
                                @result.FirstName @result.LastName
                            </h4>
                        </div>
                        <button class="btn btn-primary btn-block show-tenant-modal" data-id="@result.UserId">View profile</button>
                    </div>
                </li>
            }
        </ul>
    }
</div>

<div class="modal hide fade in" id="modal-view-tenant-profile">
    <div id="view-tenant-profile-container"></div>
</div>
<script>
    /**
     * Adds 0 left margin to the first thumbnail on each row that don't get it via CSS rules.
     * Recall the function when the floating of the elements changed.
    */
    function fixThumbnailMargins() {
        $('.row-fluid .thumbnails').each(function () {
            var $thumbnails = $(this).children(),
                previousOffsetLeft = $thumbnails.first().offset().left;
            $thumbnails.removeClass('first-in-row');
            $thumbnails.first().addClass('first-in-row');
            $thumbnails.each(function () {
                var $thumbnail = $(this),
                    offsetLeft = $thumbnail.offset().left;
                if (offsetLeft < previousOffsetLeft) {
                    $thumbnail.addClass('first-in-row');
                }
                previousOffsetLeft = offsetLeft;
            });
        });
    }


    // Fix the margins when potentally the floating changed
    $(window).resize(fixThumbnailMargins);

    fixThumbnailMargins();
</script>
